<template>
  <div class="page-main letter-result"  :style="{width: modelWidth =='320'?pageWidth:pageWidthPc, height: modelWidth =='320'?pageHeight:pageHeightPc}" id="canvas" ref="imageDom">
    <div v-if="personData" class="letter-result-box clearfix">
      <div class="f-name-box">
        <div class="f-name">
            <div class="name" 
                v-for="(item, index) in onStringSplit(personData.familyName)" 
                :key="'familyName'+index"
            >{{item}}</div>
        </div>
        <div>
            <span class="slogan">{{personData.title}}</span>
            <span class="salute">{{personData.recipient}}</span>
            <span class="date">{{personData.writeTime}}</span>
        </div>
      </div>
      <div class="des-box">
        <div class="details salute-box">
            <div class="title"><i></i>{{personData.sender}}</div>
            <div v-if="personData.content" class="content">
                <p>{{personData.content}}</p>
                <span>{{personData.signer}}</span>
                <span class="date">{{personData.signerTime}}</span>
            </div>
            <div v-else class="content">
                <p>数据暂未收录</p>
            </div>
        </div>
        <div class="details life-box" v-if="personData.senderLife">
            <div class="title"><i></i>作者生平</div>
            <div class="content">
                <p v-if="personData.senderLife">{{personData.senderLife}}</p>
                <p v-else>数据暂未收录</p>
            </div>
        </div>
      </div>
    </div>
    <div class="footer">
        <div class="btm">
            <img :src="mzlogo" alt="" class="mzlogo" />
            <img :src="logo" alt="" class="logo" />
            <a :href="qriouslySkip" target="_blank" >点击了解更多</a>
            <qriously :value="qriouslySkip" :size="100" class="qrcode"/>

            <!-- 二维码弹出框 -->
            <a-modal v-model="qrVisible" :footer="null" :mask="false" :width="modelWidth">
            <img :src="qriouslySrc" class="qrcodeModal" />
            </a-modal>

            <!-- 下载图片弹出框 -->
            <a-modal
            v-model="downloadVisible"
            :footer="null"
            :mask="true"
            :width="modelWidth"
            >
            <h5>长按图片进行更多操作</h5>
            <img :src="downloadImageSrc" class="downloadImageModal" />
            </a-modal>
        </div>
        <div class="btn-box">
            <router-link to="/" class="go-home download" id="go-home">首页</router-link>
            <a href="javascript:" class="download displayNone" id="download" v-if="showBtn" @click="download">下载</a>
        </div>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      spinning: false, // 加载中...
      qrVisible: false,
      downloadVisible: false, // 长按图片遮罩
      showBtn: true,
      pageWidth: "",
      pageHeight: "",
      pageWidthPc: "",
      pageHeightPc: "",
      familyName1: "",
      name1: "",
      personData: null, // 人物信息
      logo: require("./../../assets/img/logo4.png"),
      mzlogo: require("./../../assets/img/mzlogo1.png"),
      qrcodeUrl:
        "https://jiapu.library.sh.cn/#/genealogyCenter?familyName=",
      qriouslySrc: "",
      downloadImageSrc: "", // 下载时图片
      downScrollX: 0, // 图片截取x轴位置
      downScrollY: 0, // 图片截取y轴位置
      modelWidth: '320'
    };
  },
  computed: {
    params() {
      return {
        familyName1: this.familyName1,
      };
    },
    qriouslySkip() {
      return this.qrcodeUrl + encodeURIComponent(this.familyName1);
    },
  },
  created() {
    this.init();
    window.onresize = () => {
      setInterval(() => {
        this.init();
      }, 500);
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getRedLetter();
      this.onQRCodeImg(); // 弹出框二维码
      setTimeout(() => {
        this.onQrcode(); // 底部二维码点击
      }, 600);
    });
  },
  methods: {
    init() {
      const fw =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      const fh =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
        fw > 1100?this.modelWidth = "75%":this.modelWidth = "320";
        this.pageWidthPc = fw + "px";
        this.pageHeightPc = fh + "px";
      if (fw < fh) {
        this.pageWidth = fw + "px";
        this.pageHeight = fh + "px";
        this.rotate = "90deg";
      } else {
        this.pageWidth = fh + "px";
        this.pageHeight = fw + "px";
        this.rotate = "0deg";
      }
    },
    onQrcode() {
      // 底部二维码点击
      this.$Jquery("canvas").click(() => {
        this.qrVisible = true;
      });
    },
    onQRCodeImg() {
      // 弹出框二维码
      this.$QRCode
        .toDataURL(this.qriouslySkip)
        .then((url) => {
          this.qriouslySrc = url;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getRouterParmas() {
      let routerParmas = null;
      let _query = this.$route.query;
      if (
        !this.isEmptyObject(_query) &&
        !this.isEmpty(_query.tipsLetterParams)
      ) {
        routerParmas = JSON.parse(_query.tipsLetterParams);
      } else {
        routerParmas = JSON.parse(localStorage.tipsLetterParams);
      }
      return routerParmas;
    },
    getRedLetter() {
      let _routerParmas = this.getRouterParmas();
      this.familyName1 = _routerParmas.familyName;
      this.$axios
        .get(this.$Common.getRedLetter, { params: _routerParmas })
        .then((res) => {
          let resultData = res.data;
          this.personData = resultData.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    downloadIamge(canvas, name) {
      var alink = document.createElement("a");
      alink.download = name;
      alink.href = canvas;
      alink.target = "_blank";
      if (document.createEvent) {
        let clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", true, true);
        alink.dispatchEvent(clickEvent);
      } else alink.click();

      // this.$FileSaver.saveAs(canvas, name);
    },
    download() {
      this.spinning = true; // 加载中...
      if (this.hasScrollbar(".des-box") || this.hasScrollbar(".life-box .content p") || this.hasScrollbar(".salute-box .content p")) {
        this.pageWidth = Number(this.pageWidth.replace("px", "")) * 1.3 + "px";
        this.pageHeight = Number(this.pageHeight.replace("px", "")) * 1.3 + "px";
        this.pageWidthPc = Number(this.pageWidthPc.replace("px", "")) * 1.2 + "px";
        this.pageHeightPc = Number(this.pageHeightPc.replace("px", "")) * 1.2 + "px";
        this.downScrollX = this.$refs.imageDom.offsetLeft / 2;
        this.downScrollY = this.$refs.imageDom.offsetTop / 2;
      }
      this.$nextTick(() => {
        this.$Html2canvas(this.$refs.imageDom, {
          x: 0, // 截取画布x轴坐标
          y: 0, // 截取画布y轴坐标
          scrollX: this.downScrollX,
          scrollY: this.downScrollY,
          scale: window.devicePixelRatio,
          taintTest: true,
          allowTaint: true,
          useCORS: true,
          ignoreElements: (element) => {
            if (element.id == "download" || element.id == "go-home")
              return true;
          },
        })
          .then((canvas) => {
            this.downloadVisible = true;
            this.downloadImageSrc = canvas.toDataURL("image/png", 1);
            this.spinning = false; // 加载中...
          })
          .catch((error) => {
            this.$mui.toast("图片下载异常!");
            console.error("图片下载异常!", error);
          });
        this.init(); // 样式初始化
      });
    },
    convertCanvasToImg(canvas) {
      const myBlob = this.dataURLtoBlob(canvas.toDataURL("image/png", 0.92));
      let myUrl = URL.createObjectURL(myBlob);
      this.downImg(myUrl);
    },
    dataURLtoBlob(dataurl) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },
    downImg(url) {
      let a = document.createElement("a");
      let clickEvent = document.createEvent("MouseEvents");
      a.setAttribute("href", url);
      a.setAttribute("download", "codeImg");
      a.setAttribute("target", "_blank");
      clickEvent.initEvent("click", true, true);
      a.dispatchEvent(clickEvent);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/p {
  color: inherit;
}
/deep/.qrcode {
  position: absolute;
  bottom: -6px;
  transform: scale(0.5);
  width: 16rem;
  canvas {
    position: relative;
    width: 20%;
    height: auto;
  }
}
/deep/.ant-modal-content {
  background-color: rgba(255, 255, 255, 0.9);
}
/deep/.ant-modal-body {
  text-align: center;

  .downloadImageModal {
    width: 100%;
  }
}

@media screen and (min-width: 1100px) {
    // 截屏样式
    .box-sty {
        .des-box {
            .details {
                .content {

                    p{
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
@media screen and (min-width: 980px) and (max-width: 1100px) {
    .page-main.letter-result .letter-result-box .f-name-box .name {
        line-height: 2rem;
    }
    .page-main.letter-result .footer .btn-box .download {
        line-height: 0.9rem;
        font-size: 20px;
    }
    .page-main.letter-result .footer .btn-box {
        left: 19vh;
    }
    .displayNone {
        display: none;
    }
    .page-main.letter-result .letter-result-box .des-box .details .content p {
        line-height: 1.8;
        font-size: 16px;
    }
}
</style>